<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-logo{
        width: 150px;
        background-image: '@/assets/logo.png';
        border-radius: 3px;
        float: left;
        position: relative;
        top: 20px;
        left: 20px;
    }
    .layout-nav{
        width: 80%;
        height: 100%;
        margin: 0 auto;
        margin-right: 20px;
    }
</style>
<template>
    <div class="layout">
        <Layout :style="{minHeight: '99.5vh'}">
            <navbar />
            <Layout>
                <Sider breakpoint="xl" collapsible :collapsed-width="78" v-model="isCollapsed" :style="{borderRadius: '10px',zIndex: '1000'}">
                    <sidebar /> 
                    <div slot="trigger"></div>
                </Sider>
                
                <router-view />
            </Layout>
        </Layout>
    </div>
</template>
<script>
    import navbar from './components/navbar'
    import sidebar from './components/sidebar'

    export default {
        name: 'AppMain',
        components:{
            navbar,sidebar
        },
        data () {
            return {
                isCollapsed: false
            };
        },
        computed: {

        },
        methods: {

        }
    }
</script>
